import { TextDemos } from '@docs/demos';
import { Layout } from '@/layout';
import { MDX_DATA } from '@/mdx';

export default Layout(MDX_DATA.Text);

## Usage

<Demo data={TextDemos.usage} />

<Gradient component="Text" />

<Demo data={TextDemos.gradient} />

## Truncate

Set `truncate` prop to add `text-overflow: ellipsis` styles:

<Demo data={TextDemos.truncate} />

## Line clamp

Specify maximum number of lines with `lineClamp` prop. This option uses [-webkit-line-clamp](https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp)
CSS property ([caniuse](https://caniuse.com/css-line-clamp)). Note that `padding-bottom` cannot be set on text element:

<Demo data={TextDemos.linesConfigurator} />

Line clamp can also be used with any children (not only strings), for example with [Typography](/core/typography/):

<Demo data={TextDemos.lineClamp} />

## Inherit styles

Text always applies font-size, font-family and line-height styles,
but in some cases this is not a desired behavior. To force Text to inherit parent
styles set `inherit` prop. For example, highlight part of [Title](/core/title/):

<Demo data={TextDemos.inherit} />

<Polymorphic
  defaultElement="p"
  changeToElement="a"
  component="Text"
/>

## span prop

Use `span` prop as a shorthand for `component="span"`:

```tsx
import { Text } from '@mantine/core';

function Demo() {
  return (
    <>
      <Text span>Same as below</Text>
      <Text component="span">Same as above</Text>
    </>
  );
}
```
